<template>
  <div ref="chinaMap" style="width: 100%; height: 700px;"></div>
</template>
<script>
import * as echarts from 'echarts'
import chinaMapData from '@/assets/chinaMap/china.json';
export default {
  props:{
    chartData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      chinaMapData:'',
    }
  },
  watch:{
    chartData:'changeChartsData'
  },
  mounted() {
    this.changeChartsData();
  },
  methods: {
    changeChartsData() {
      this.chinaMapData = this.chartData.map(item =>{
        return {
          name: item.city.replace(/(省|市|自治区|特别行政区|回族自治区|维吾尔自治区|壮族自治区|澳门|香港).*$/g, ''),
          value: item.count
        };
      });
      this.renderChinaMap()
    },
    renderChinaMap() {
      let sumData = 0;
      this.chinaMapData.forEach(item => sumData += item.value);
      const charts = echarts.init(this.$refs.chinaMap);
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            if (params.value) {
              return params.name + ' : ' + params.value;
            } else {
              return params.name + ' : 0';
            }
          }
        },
        title: {
          text: '产品溯源统计',
          subtext: '我们的产品走过了'+this.chartData.length+'个省区，被客户查询了'+sumData+'次',
          left: 'center', // 标题居中显示
          textStyle: {
            color: '#22B14C', // 文本颜色
            fontSize: 30,// 字体大小
          },
          subtextStyle: {
            color: '#AAACAD', // 副标题文本颜色
            fontSize: 15 // 字体大小
          },
        },
        //   映射颜色
        visualMap: {
          min: 0,
          max: 1000,
          text: ['高', '低'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered'] // 视觉映射范围颜色
          }
        },
        series: [
          {
            type: 'map',
            roam: true,
            zoom: 1.2,
            map: 'china',
            data: this.chinaMapData,
            itemStyle: {
              normal: {
                areaColor: '#CFD1D4',
                borderWidth: 2,
                borderColor: '#FFFCFF',
              },
              emphasis: {
                areaColor: '#FFF72B'
              }
            },
          }
        ]
      };
      echarts.registerMap('china', chinaMapData);
      charts.setOption(option)
    }
  }
}
</script>
<style scoped>
</style>
